<script setup lang="ts">
import { ref, reactive } from 'vue';

const canvasRef = ref<any>(null);

// 组件数据
const components = reactive([
  { id: 1, name: '图表1', x: 100, y: 100, width: 200, height: 150 },
  { id: 2, name: '图表2', x: 350, y: 200, width: 180, height: 120 },
  { id: 3, name: '图表3', x: 200, y: 350, width: 220, height: 160 },
]);

// 当前选中的组件
const selectedId = ref(null);

// 拖拽状态
const isDragging = ref(false);
const dragStartPos = ref({ x: 0, y: 0 });
const dragStartItemPos = ref({ x: 0, y: 0 });
const currentDragItem = ref<any>(null);

// 选中组件
function selectItem(id: any) {
  selectedId.value = id;
}

// 点击画布空白处取消选中
function onCanvasMouseDown(e: any) {
  if (e.target.classList.contains('canvas-container') || e.target.classList.contains('canvas')) {
    selectedId.value = null;
  }
}

// 开始拖拽组件
function onItemMouseDown(e: MouseEvent, item: any) {
  e.stopPropagation();

  // 选中当前组件
  selectedId.value = item.id;

  // 设置拖拽状态
  isDragging.value = true;
  currentDragItem.value = item;

  // 记录起始位置
  dragStartPos.value = { x: e.clientX, y: e.clientY };
  dragStartItemPos.value = { x: item.x, y: item.y };

  // 绑定全局事件
  document.addEventListener('mousemove', onMouseMove);
  document.addEventListener('mouseup', onMouseUp);
}

// 拖拽移动
function onMouseMove(e: any) {
  if (!isDragging.value || !currentDragItem.value) {
    return;
  }

  // 计算偏移量
  const deltaX = e.clientX - dragStartPos.value.x;
  const deltaY = e.clientY - dragStartPos.value.y;

  // 更新组件位置
  currentDragItem.value.x = dragStartItemPos.value.x + deltaX;
  currentDragItem.value.y = dragStartItemPos.value.y + deltaY;

  // 边界检测（可选）
  if (currentDragItem.value.x < 0) {
    currentDragItem.value.x = 0;
  }
  if (currentDragItem.value.y < 0) {
    currentDragItem.value.y = 0;
  }
}

// 结束拖拽
function onMouseUp() {
  isDragging.value = false;
  currentDragItem.value = null;

  // 移除全局事件
  document.removeEventListener('mousemove', onMouseMove);
  document.removeEventListener('mouseup', onMouseUp);
}
</script>

<template>
  <div class="canvas-container" @mousedown="onCanvasMouseDown">
    <!-- 画布区域 -->
    <div ref="canvasRef" class="canvas">
      <!-- 遍历所有组件 -->
      <div
        v-for="(item, index) of components"
        :key="item.id"
        class="draggable-item"
        :class="{ selected: item.id === selectedId }"
        :style="{
          left: `${item.x}px`,
          top: `${item.y}px`,
          width: `${item.width}px`,
          height: `${item.height}px`,
          zIndex: index + 1,
        }"
        @mousedown="onItemMouseDown($event, item)"
        @click="selectItem(item.id)"
      >
        <!-- 这里放实际内容，比如图表 -->
        <div class="item-content">
          {{ item.name }}
        </div>

        <!-- 选中时显示边框 -->
        <div v-if="item.id === selectedId" class="selection-border" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.canvas-container {
  width: 100vw;
  height: 100vh;
  background: #f5f5f5;
  position: relative;
  overflow: hidden;
}

.canvas {
  width: 100%;
  height: 100%;
  position: relative;
  background: white;
  background-image:
    radial-gradient(circle, #ddd 1px, transparent 1px);
  background-size: 20px 20px;
}

.draggable-item {
  position: absolute;
  cursor: move;
  user-select: none;
  border: 2px solid transparent;
  border-radius: 4px;
  transition: border-color 0.2s;
}

.draggable-item:hover {
  border-color: #409eff;
}

.draggable-item.selected {
  border-color: #409eff;
}

.item-content {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 2px;
}

.selection-border {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid #409eff;
  border-radius: 4px;
  pointer-events: none;
}
</style>
